import React, { useEffect, useState } from 'react'
import { Button, Drawer, message, Space } from 'antd'
import useGetTableDataNoPagination from '@/hooks/useGetTableDataNoPagination'
import { getProductDevelopmentSeason, createDevelopmentSeason, deleteDevelopmentSeason } from '@/api/goods'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useDevSeasonColumns } from '../columns'
import { ITableData } from '../types'
import { EditFormVertical } from '@/components/CustomForm'
import CustomTable from '@/components/CustomTable'
import { useNavigate } from 'react-router-dom'
import { useFormEdit } from '../useForm'
import dayjs from 'dayjs'
import { PlusOutlined } from '@ant-design/icons'
import { onValuesChange } from '@/utils/onValuesChange'
const Index: React.FC = () => {
  const [FormEdit] = useForm()
  const [form] = useForm()
  const [isDrawModalShow, setisDrawModalShow] = useState<boolean>(false)
  const [ispedding, setispedding] = useState<boolean>(false)
  const { tableProps, params, setParams, search, reset } = useGetTableDataNoPagination<ITableData>(
    getProductDevelopmentSeason,
    {
      form: form,
    },
  )
  const onDrawCancel = () => {
    setisDrawModalShow(false)
    FormEdit.resetFields()
  }
  const onConfirm = async (values: any) => {
    setispedding(true)
    const year = dayjs(values.year).format('YYYY')
    const res = await createDevelopmentSeason({ ...values, year }).finally(() => setispedding(false))
    if (res.code === 200) {
      message.success('操作成功')
      onDrawCancel()
      search(params)
    }
  }
  const onDel = async (info: ITableData) => {
    const res = await deleteDevelopmentSeason({ seasonId: info.seasonId })
    if (res.code === 200) {
      message.success('操作成功')
      search(params)
    }
  }
  return (
    <PageContainer className="goods_devseason_page">
      <div className="table_extra_flex" style={{ margin: '12px' }}>
        <Button
          type="primary"
          onClick={() => {
            setisDrawModalShow(true)
          }}
          icon={<PlusOutlined />}
        >
          新建开发季
        </Button>
      </div>
      <CustomTable columns={useDevSeasonColumns({ onDel })} {...tableProps} rowKey={(rows) => rows.seasonId} />
      <Drawer
        title="新建开发季"
        open={isDrawModalShow}
        maskClosable
        onClose={onDrawCancel}
        footer={
          <div className="flex_end">
            <Space>
              <Button onClick={onDrawCancel}>取消</Button>
              <Button
                loading={ispedding}
                type="primary"
                onClick={() => FormEdit.validateFields().then((values) => onConfirm(values))}
              >
                确定
              </Button>
            </Space>
          </div>
        }
      >
        <EditFormVertical
          editConfig={useFormEdit()}
          form={FormEdit}
          onValuesChange={(changedValues) => onValuesChange(changedValues, ['seasonName'], FormEdit)}
          initialValues={{ year: dayjs() }}
        />
      </Drawer>
    </PageContainer>
  )
}

export default Index
